function getProducts (titleid) {
    titleid = titleid || 0;
    $.ajax({
        url: "http://chst.vip:1234/api/getbaicaijiaproduct?titleid="+titleid,
        type: "GET",
        success(req) {
            let products = document.querySelector('#product .info');
            let ele = "";

            // console.log(req.result)
            req.result.forEach(item => {
                ele += `
                            <li>
                                <a href="" class="clearfix im">
                                    <div class="img fl">
                                        ${item.productImg}
                                    </div>
                                    <div class="infoR">
                                        <div class="title">
                                            <h4>${item.productName}</h4>
                                            <div class="price">
                                                ${item.productPrice}
                                            </div>
                                        </div>
                                        <div class="down">
                                            <div class="bar">
                                                <div class="bar_in">
                                                    0%
                                                </div>
                                            </div>
                                            <span class="yiling">已领0/剩余72</span>
                                            <div class="click">
                                                <div class="left">
                                                    点此领取优惠券
                                                </div>
                                                <div class="right">
                                                    下单链接
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            `
            });
            products.innerHTML = ele;

            //-----进度条------
            let cols = document.querySelectorAll('#product .info .bar_in');
            let num = 0;
            console.log(cols);
            

            // for(var i=0;i<cols.length;i++){
            //     cols[i].style.width = num +'px';
            // }

            let timer = setInterval(function(){               
                num += random(1,4);
                console.log(num);
                for(var i=0;i<cols.length;i++){
                    cols[i].style.width = num +'px';
                    cols[i].innerHTML = num+"%";
                }

                if(num>=100){
                    num = 100;
                    clearInterval(timer);
                }
            },50)

        }
    })
}

getProducts();


(function () {
    //获取导航栏信息
    $.ajax({
        url: "http://chst.vip:1234/api/getbaicaijiatitle",
        type: "GET",
        success(req) {
            let nav = document.querySelector('.nav ul');
            let ele = "";

            // console.log(req.result)
            req.result.forEach(item => {
                ele += `
                        <li titleid="${item.titleId}">${item.title}</li>
                        `
            });
            nav.innerHTML = ele;


            //标题点击事件
            let titles = document.querySelectorAll('.nav li');
            titles[0].className = "active";

            for (var i = 0; i < titles.length; i++) {
                titles[i].index = i;
                titles[i].onclick = function () {
                    document.querySelector('.nav .active').className = "";
                    this.className = "active";

                    let id = this.getAttribute('titleid')
                    getProducts(id);

                    // let ss = document.querySelector('#product .info .bar');
                    // console.log(ss);
                }
            }

               
        }
    })


    //导航栏拖拽
    $('.nav ul').on('touchstart', function (e) {
        $(this).on('touchmove', function (e) {
            let pageX = e.targetTouches[0].pageX;
            $(this).css({ left: pageX - 200 })
        })
    });



    $('.gotop').click(function () {
        $('body, html').animate({ scrollTop: 0 }, 1000)
    })
})();

function random(n1,n2){
    var min = n1<n2?n1:n2;
    var max = n1>n2?n1:n2;
    return Math.floor(Math.random()*(max-min+1))+min;
}


